<template>
    <div style="padding: 15px;">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
            <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="报损单号"
                      prop="code"
                      style="margin-right: 15px"
                      label-width="120px"
                    >
                      <el-input
                        disabled
                        v-model="form.code"
                        style="width: 100%"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item label="仓库" prop="warehouseCode">
                          <el-input v-model="form.warehouseName" style="width:75%" :disabled="true"/>

                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item  label="入驻商" prop="shipmentCode" style="margin-right: 15px" label-width="120px">
                      <el-input v-model="form.shipmentName" style="width:100%" :disabled="true"/>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="报损类型" prop="type">
                      <el-select v-model="form.type"
                                 :disabled="true"
                                 placeholder="请选择报损类型" style="width:75%">
                        <el-option
                          v-for="item in typeList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="19">
                    <div class="grid-content bg-purple">
                        <el-form-item  label="报损原因" style="margin-right: 15px" label-width="120px">
                            <el-input v-model="form.remarks" style="width:75%" :disabled="true"/>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <vxe-table
                border
                resizable
                show-overflow
                :align="allAlign"
                :footer-method="footerMethod"
                :edit-rules="validRules"
                show-footer
                ref="xTable"
                :data="tableData"
                >
            <vxe-table-column type="seq" width="60"></vxe-table-column>
            <vxe-table-column field="goodsName" title="商品名称" width="270">
            </vxe-table-column>
            <vxe-table-column field="goodCode" title="商品编码"  width="120"></vxe-table-column>
            <vxe-table-column field="goodsBarCode" title="商品条码"  width="120"></vxe-table-column>
            <vxe-table-column field="goodsUnitName" title="单位"  width="120"></vxe-table-column>
            <vxe-table-column field="unitQuantity" title="报损数量" width="120"></vxe-table-column>
            <vxe-table-column field="actualUnitQuantity" title="实际报损数量" width="120"></vxe-table-column>
            <vxe-table-column field="remarks" title="备注" ></vxe-table-column>
        </vxe-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="funcSubmitCheck" plain>返 回</el-button>
        </div>
    </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  import VXETablePluginElement from 'vxe-table-plugin-element'
  import 'vxe-table-plugin-element/dist/style.css'
  import goodsSelect from '@/views/components/goodsElSelect.vue'
  import { damagedDetail } from '@/api/store'
  import { getDictList } from '@/api/basicInfo'

  Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
    VXETable.use(VXETablePluginElement)
    export default {
        name: 'Parent',
        components: {
            goodsSelect,
        },
        data() {
            return {
                allAlign:'center',
                warehouseData:[],
                shipmentData:[],
                dictType: 'damagedType',
                isDisable:false,   //确定键显示按钮
                typeList: [
                    { code: "0", name: "仓库领用" },
                    { code: "1",name: "财务领用" }
                ],
                form: {
                    code:'',
                  shipmentName:'',
                  warehouseName:'',
                    shipmentCode: '',
                    type:'',
                    warehouseCode:"",
                    supplierCode:'',
                    remarks: '', // 备注
                    damagedItemList: [],
                    damagedBy: ''
                },
                loading: false,
                tableData: [],
                rules: {
                    code: [
                        { required: true, message: '', trigger: 'change' }
                    ],
                    shipmentCode: [
                        { required: true, message: '请输入客户姓名', trigger: 'change' }
                    ],
                    warehouseCode: [
                        { required: true, message: '请选择仓库', trigger: 'change' }
                    ]
                },
                validRules: {
                    goodsName: [
                        { required: true, message: '商品名称必须填写' },
                    ],
                    unitName: [
                        { required: true, message: '单位必须填写' },
                    ],
                    unitQuantity: [
                        { required: true, message: '数量必须填写' },
                    ],
                }
            }
        },
        created() {
            // this.getWarehouse().then(()=>{
            //     this.getShipmentParties();
            //     this.getDictList(this.dictType);
            // });

          this.getDictList(this.dictType);
        },
        methods: {

            // 单据类型字典查询
            getDictList(dictType){
                getDictList(dictType).then(response => {
                    this.typeList = response.data[0].dictList;
                    this.getInfo();
                })
            },
            // 获取页面信息
            getInfo() {
                this.loading = true;
                let code = this.$route.query.code ? this.$route.query.code : "";
                damagedDetail(code).then(response => {
                    this.form = response.data;
                    this.tableData = this.form.damagedItemList;
                    this.loading = false
                    // this.$message({ message: response.msg, type: 'success' })
                })
            },
            // 选择入驻商
            setCustomerCode(value) {
                this.form.shipmentCode = value;
                this.tableData = [];
            },
            // 商品选择
            setGoodsCode(row){
                let obj = this.$refs.goodsSelect.obj
                row.goodsName = obj.value;
                row.goodsCode = obj.code;
                row.goodCode = obj.goodCode;
                row.goodsUnit = obj.unitCode;
                row.goodsBarCode = obj.barCode;
                row.goodsUnitConversionList = obj.goodsUnitConversionList;
            },
            // 单位选择
            selectGoodsUnitCode(event, row){
                row.goodsUnit = event.value;
                row.unitName = event.label;
            },
            footerMethod ({ columns, data }) {
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 1) {
                            return '合计'
                        }
                        if (['unitQuantity', 'actualUnitQuantity'].includes(column.property)) {
                              return XEUtils.sum(data, column.property)
                        }
                        return '-'
                    })
                ]
            },

            // 返回
            funcSubmitCheck() {
              this.$eventBus.$emit('refreshList')
              this.$store.dispatch("tagsView/delView", this.$route);
              this.$router.push({
                path: "/kngl/damaged"
              });
            },
        }
    }
</script>
<style lang="scss" scoped>
    .dialog-footer {
        margin: 150px auto;
        width: 175px;
        // float: right;
    }
</style>

<style>
    .vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
        padding: 6px 0;
    }
    .vxe-toolbar{padding:0 0 10px 0}
</style>
